<template>
	<view class="sure-binding-page">
		<view class="sure-binding-step-content">
			<view 
				class="common-step" 
				:class=" stepIndex==index?'common-step-active':''" 
				v-for="(item,index) in steps" 
				:key="index" 
				@click="changeStepIndex(item.value)"
			>
				<view class="">{{item.value + 1}}</view>
				<view class="">{{item.name}}</view>
			</view>
			<view class="line-long"></view>
		</view>
		<view>
			<!-- 第一步 机构信息 -->
			<view v-if="stepIndex == 0">
				<view class="sure-binding-step">
					<view class="sure-binding-organ">
						<view class="">机构名称</view>
						<input type="text" v-model="organization_name" placeholder="请输入你的机构名称" @input="handleInputOrganizationName"/>
					</view>
					<view class="firm-name" v-if="type == 1 ">
						<view class="">公司名称</view>
						<input type="text" v-model="company_name" placeholder="请输入公司名称" @input="handleInputCompanyName"/>
					</view>
					<view class="society-code" v-if="type == 1 ">
						<view class="">统一社会信用代码</view>
						<input type="text" v-model="unified_social_credit_code" placeholder="请输入社会信用代码" @input="handleInputUnifiedSocialCreditCode"/>
					</view>
					
					<view class="firm-addre">
						<view class="">所在地区</view>
						<view style="margin-left: 40upx; display: flex;justify-content: space-between;flex-grow: 1;" @click="handleShowArea">
							<input type="text" disabled v-model="area" placeholder="请选择省、市、区（县)"/>
							<image :src="imglink + 'home/arrow-right.png'" mode=""></image>
						</view>
					</view>
					<view class="firm-addre-details">
						<view style="width: 126upx;">详细地址</view>
						<textarea v-model="address" placeholder="请输入详细地址"  @input="handleInputAddress"/>
					</view>
					<view class="valid-time">
						<view class="valid-time-title">
							营业执照有效期
						</view>
						<view class="valid-time-detail">
							<view class="">
								<view class="start-data" style="margin-right: 10upx;">
									<picker mode="date" :value="business_licences_start_date" @change="changeBusinessLicencesStartDate">
									    <view>{{business_licences_start_date}}</view>
									</picker>
								</view>
								至
								<view class="start-data" :style="business_licences_is_long_term==1?'margin-left: 10upx;text-decoration: line-through;':'margin-left: 10upx;'">
									<picker mode="date" :disabled="business_licences_is_long_term==1?true:false" :value="business_licences_end_date" @change="changeBusinessLicencesEndDate">
									    <view>{{business_licences_end_date}}</view>
									</picker>
								</view>
							</view>
							<checkbox-group @change="businessLicencesRadioChange">
								<label class="uni-list-cell uni-list-cell-pd">
									<view>
										<checkbox style="transform: scale(0.7);margin-left: 28upx;" color="#FF8B46" :checked="business_licences_is_long_term==1?true:false" />
									</view>
									<view class="long-term-ffective" :style="{color:business_licences_is_long_term?'#FF8B46':''}">(长期有效)</view>
								</label>
							</checkbox-group>
						</view>
					</view>
				</view>
				<view class="firm-msg">
					<view class="uplode-img"  v-if="type == 1">
						<view class="uplode-img-title">
							营业执照<text>点上传营业执照照片</text>
						</view>
						<view class="uplode-img-detail" @click="uploadPhoto('business_licences')">
							<image :src="business_licences" mode="" v-if="business_licences!=''"></image>
							<view v-else>
								<image :src="imglink + 'member/manage_icon_camera.png'" mode=""></image>
								<view class="">+点击上传照片</view>
							</view>
						</view>
					</view>
					<view class="uplode-img">
						<view class="uplode-img-title" v-if="type == 1">
							公司前台照片<text>点击上传公司前台照片</text>
						</view>
						<view class="uplode-img-title" v-else>
							门头照<text>点击上传门头照</text>
						</view>
						<view class="uplode-img-detail" @click="uploadPhoto('door_photo')">
							<image :src="door_photo" mode="aspectFit" v-if="door_photo!=''"></image>
							<view class="" v-else>
								<image src="/static/member/manage_icon_camera.png" mode=""></image>
								<view v-if="type==1">+点击上传公司前台照片</view>
								<view v-else>+点击上传门头照</view>
							</view>
						</view>
					</view>
					<view class="uplode-img">
						<view class="uplode-img-title" v-if="type == 1">
							公司环境照1<text>点击上传公司环境照1</text>
						</view>
						<view class="uplode-img-title" v-else>
							店内环境照<text>点击上传店内环境照</text>
						</view>
						<view class="uplode-img-detail" @click="uploadPhoto('in_store_photo')">
							<image :src="in_store_photo" mode="aspectFill" v-if="in_store_photo!=''"></image>
							<view class="" v-else>
								<image src="/static/member/manage_icon_camera.png" mode="aspectFit"></image>
								<view v-if="type==1">+点击上传公司环境照1</view>
								<view v-else>+点击上传店内环境照</view>
							</view>
						</view>
					</view>
					<view class="uplode-img" v-if="type == 1">
						<view class="uplode-img-title">
							公司环境照2<text>点击上传公司环境照2</text>
						</view>
						<view class="uplode-img-detail" @click="uploadPhoto('in_store_photo2')">
							<image :src="in_store_photo2" mode="aspectFill" v-if="in_store_photo2!=''"></image>
							<view class="" v-else>
								<image src="/static/member/manage_icon_camera.png" mode=""></image>
								<view class="">+点击上传公司环境照2</view>
							</view>
						</view>
					</view>
				</view>
				<view class="next-step" @click="handleNextStep">
					下一步
				</view>
			</view>
			<!-- 第二步 银行卡信息 -->
			<view class="bank-card-msg" v-if="stepIndex == 1">
				<view class="bank-card-content-msg">
					<view class="legal-person-name">
						<view class="">法人姓名</view>
						<input type="text" v-model="name_of_cardholder" placeholder="请输入法人姓名" @input="handleInputNameOfCardholder"/>
					</view>
					<view class="legal-person-name" style="border-top: 0;">
						<view class="">身份证号</view>
						<input type="text" v-model="id_of_cardholder" placeholder="请输入身份证号" @input="handleInputIdOfCardholder"/>
					</view>
					<view class="valid-time">
						<view class="valid-time-title">
							身份证有效期
						</view>
						<view class="valid-time-detail">
							<view class="">
								<view class="start-data" style="margin-right: 10upx;">
									<picker mode="date" :value="account_id_start_date" @change="changeStartDate">
									    <view>{{account_id_start_date}}</view>
									</picker>
								</view>
								至
								<view class="start-data" :style="is_long_term==1?'margin-left: 10upx;text-decoration: line-through;':'margin-left: 10upx;'">
									<picker mode="date" :disabled="is_long_term==1?true:false" :value="account_id_end_date" @change="changeEndDate">
									    <view>{{account_id_end_date}}</view>
									</picker>
								</view>
							</view>
							<checkbox-group @change="radioChange">
								<label class="uni-list-cell uni-list-cell-pd">
									<view>
										<checkbox style="transform: scale(0.7);margin-left: 28upx;" color="#FF8B46" :checked="is_long_term==1?true:false" />
									</view>
									<view class="long-term-ffective" :style="{color:is_long_term?'#FF8B46':''}">(长期有效)</view>
								</label>
							</checkbox-group>
						</view>
					</view>
					<view class="identity-card-img">
						<view class="identity-card-img-title">身份证件照</view>
						<view class="identity-card-img-content">
							<view class="identity-card-img-detail"  @click="uploadPhoto('front_of_account_image')">
								<view class="" v-if="front_of_account_image == ''">
									<image :src="imglink + 'member/add-code.png'" mode="aspectFit"></image>
									<view class="">上传身份证正面照</view>
								</view>
								<image :src="front_of_account_image" mode="aspectFit" v-else></image>
							</view>
							<view class="identity-card-img-detail" @click="uploadPhoto('back_of_account_image')"  >
								<view class="" v-if="back_of_account_image == ''">
									<image :src="imglink + 'member/add-code.png'" mode="aspectFit"></image>
									<view class="">上传身份证反面照</view>
								</view>
								<image :src="back_of_account_image" mode="aspectFit" v-else></image>
							</view>
						</view>
					</view>
					<view class="give-remit" v-if="type==1">
						<view class="give-remit-title">金额打款</view>
						<view class="give-remit-content">
							<radio-group @change="handleChangePayTo" style="display: flex;">
								<label 
									style="display: flex;" 
									class="uni-list-cell uni-list-cell-pd" 
									v-for="(item, index) in items" :key="index"
								>
								<!-- v-for="(item, index) in items" :key="index + '1'" -->
									<view>
										<radio style="transform: scale(0.7);" color="#FF8B46" :value="item.value" :checked="parseInt(item.value,10) == pay_to "/>
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="legal-person-name" style="border-bottom: none;">
						<view class="">邮箱地址</view>
						<input type="text" v-model="email" placeholder="请输入邮箱" />
					</view>
				</view>
				<view class="bank-card-all-msg">
					<view class="explain-title">
						<view class=""></view>
						<view class="">
							银行卡信息
						</view>
					</view>
					<view class="bank-name">
						<view class="">开户名称</view>
						<input type="text" v-model="account_name" placeholder="请输入开户名称" @input="handleInputAccountName"/>
					</view>
					<view class="bank-name">
						<view class="">银行卡号</view>
						<input type="number" v-model="account_number" placeholder="请输入银行卡号" @input="handleInputAccountNumber"/>
					</view>
					<view class="user-bank-name">
						<view class="">开户银行</view>
						<view class="" @click="selectBank('bank')">
							<input type="text" disabled :value="bank_name | bankName_val" placeholder="请选择开户银行"/>
							<image :src="imglink + 'home/arrow-right.png'" mode=""></image>
						</view>
					</view>
					<view class="user-bank-name" style="border-bottom: 0;">
						<view class="">开户支行</view>
						<view class=""  @click="selectBank('branch_bank')">
							<input type="text" disabled :value="branch_bank_name | bankName_val" placeholder="请选择开户支行"/>
							<image :src="imglink + 'home/arrow-right.png'" mode=""></image>
						</view>
					</view>
				</view>
				<view class="next-last-step">
					<view class="step-common last-step" @click="handlePreStep">上一步</view>
					<view class="step-common next-step-detail" @click="handleNextStep">下一步</view>
				</view>
			</view>
			<!-- 第三部  确认信息无误 -->
			<view class="sure-all-msg" v-if="stepIndex == 2">
				<view class="firm-sure-msg">
					<view class="sure-organ-name">
						<view class="">机构名称</view>
						<input type="text" v-model="organization_name" disabled/>
					</view>
					<view class="sure-organ-name" v-if="type==1">
						<view class="">公司名称</view>
						<input type="text" v-model="company_name" disabled/>
					</view>
					<view class="society-code" v-if="type == 1 ">
						<view class="">统一社会信用代码</view>
						<input type="text" v-model="unified_social_credit_code" placeholder="请输入社会信用代码" disabled/>
					</view>
					<view class="firm-addre">
						<view class="">所在地区</view>
						<view style="margin-left: 40upx; display: flex;justify-content: space-between;flex-grow: 1;">
							<input type="text" disabled v-model="area" placeholder="请选择省、市、区（县)" disabled="true"/>
							<image :src="imglink + 'home/arrow-right.png'" mode=""></image>
						</view>
					</view>
					<view class="firm-addre-details">
						<view style="width: 126upx;">详细地址</view>
						<textarea v-model="address" placeholder="请输入详细地址" disabled/>
					</view>
					<view class="ID-number">
						<view class="">营业执照有效期</view>
						<view class="">
							<view class="" style="margin-right: 10upx;">{{business_licences_start_date}}</view>
							至
							<view class="" :style="business_licences_is_long_term==1?'margin-left: 10upx;text-decoration: line-through;':'margin-left: 10upx;'">{{business_licences_end_date}}</view>
							<label class="uni-list-cell uni-list-cell-pd" v-if="business_licences_is_long_term==1">
								<view>
									<checkbox style="transform: scale(0.7);margin-left: 28upx;" color="#FF8B46" :checked="business_licences_is_long_term==1?true:false" disabled="true"/>
								</view>
								<view class="long-term-ffective" :style="{color:business_licences_is_long_term?'#FF8B46':''}">(长期有效)</view>
							</label>
						</view>
					</view>
				</view>
				<view class="firm-sure-msg">
					<view class="uplode-img"  v-if="type == 1  && business_licences!=''">
						<view class="uplode-img-title">
							营业执照
						</view>
						<view class="uplode-img-detail">
							<image :src="business_licences" mode="aspectFit"></image>
						</view>
					</view>
					<view class="uplode-img" v-if="door_photo!=''">
						<view class="uplode-img-title" v-if="type == 1">
							公司前台照片
						</view>
						<view class="uplode-img-title" v-else>
							门头照
						</view>
						<view class="uplode-img-detail">
							<image :src="door_photo" mode="aspectFit"></image>
						</view>
					</view>
					<view class="uplode-img"  v-if="in_store_photo!=''">
						<view class="uplode-img-title" v-if="type == 1">
							公司环境照1
						</view>
						<view class="uplode-img-title" v-else>
							店内环境照
						</view>
						<view class="uplode-img-detail">
							<image :src="in_store_photo" mode="aspectFill"></image>
						</view>
					</view>
					<view class="uplode-img" v-if="type == 1 && in_store_photo2!=''">
						<view class="uplode-img-title">公司环境照2</view>
						<view class="uplode-img-detail">
							<image :src="in_store_photo2" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="sure-user-msg">
					<view class="sure-organ-name">
						<view class="">法人姓名</view>
						<input type="text" v-model="name_of_cardholder" disabled/>
					</view>
					<view class="sure-organ-name">
						<view class="">身份证号</view>
						<input type="text" v-model="id_of_cardholder" disabled/>
					</view>
					<view class="ID-number">
						<view class="">身份证有效期</view>
						<view class="">
							<view class="" style="margin-right: 10upx;">{{account_id_start_date}}</view>
							至
							<view class="" :style="is_long_term==1?'margin-left: 10upx;text-decoration: line-through;':'margin-left: 10upx;'">{{account_id_end_date}}</view>
							<label class="uni-list-cell uni-list-cell-pd" v-if="is_long_term==1">
								<view>
									<checkbox style="transform: scale(0.7);margin-left: 28upx;" color="#FF8B46" :checked="is_long_term==1?true:false" disabled="true"/>
								</view>
								<view class="long-term-ffective" :style="{color:is_long_term?'#FF8B46':''}">(长期有效)</view>
							</label>
						</view>
					</view>
					<view class="identity-card-img">
						<view class="identity-card-img-title">身份证件照</view>
						<view class="identity-card-img-content">
							<view class="identity-card-img-detail" v-if="front_of_account_image!=''">
								<image :src="front_of_account_image" mode="aspectFit"></image>
							</view>
							<view class="identity-card-img-detail" v-if="back_of_account_image!=''">
								<image :src="back_of_account_image" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="legal-person-name" style="border-bottom: none;">
						<view class="">邮箱地址</view>
						<input type="text" v-model="email" disabled/>
					</view>
				</view>
				<view class="sure-bank-msg">
					<view class="explain-title">
						<view class=""></view>
						<view class="">
							银行卡信息
						</view>
					</view>
					<view class="sure-organ-name">
						<view class="">开户名称</view>
						<input type="text" v-model="account_name" disabled/>
					</view>
					<view class="sure-organ-name">
						<view class="">银行卡号</view>
						<input type="number" v-model="account_number" disabled/>
					</view>
					<view class="sure-organ-name">
						<view class="">开户银行</view>
						<input type="text" :value="bank_name | bankName_val" disabled/>
					</view>
					<view class="sure-organ-name" style="border-bottom: 0;">
						<view class="">开户支行</view>
						<input type="text" :value="branch_bank_name | bankName_val" disabled/>
					</view>
				</view>
				<view class="sure-submit">
					<view 
						@click="submitBtn" 
						:style="{background:remaining_time ==0?'linear-gradient(to right,#FE9543,#FF664F)':'#dedede'}"
					>
						确认提交<text v-if="remaining_time>0">（{{remaining_time}}s）</text>
					</view>
					<view class="" @click="handlePreStep">
						上一步
					</view>
				</view>
			</view>
		</view>
		<!-- 地址选择 -->
		<view v-if="showSelectAreaBlock">
			<picker-view class="birthday" :indicator-style="indicatorStyle" :value="areaIndex" @change="handleSeleteArea">
				<picker-view-column>
					<view class="item" v-for="item in provinceList" :key="item.province_id">{{item.province | goodName_val}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="item in cityListDetails" :key="item.city_id">{{item.city | goodName_val}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="item in prefectureDetailList" :key="item.country_id">{{item.country | goodName_val}}</view>
				</picker-view-column>
			</picker-view>
			<!-- 遮罩层 -->
			<view @click="cancleSelected" class="birthday-tkang" v-if="showSelectAreaBlock"></view>
			<view class="determine" @click="confirmSelected">确定</view>
		</view>
		<!-- 信息确定无误之后提交 -->
		<view class="save-popup" v-if="saveState">
			<view class="save-popup-img">
				<image :src="imglink + 'home/pop_icon_success.png'" mode=""></image>
			</view>
			<view class="save-popup-title">
				绑定卡信息提交成功！
			</view>
		</view>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import {uploadFile} from '@/common/alioss.js'
	export default{
		filters: {
			goodName_val(value) {
				if (!value) return ''
				if (value.length > 4) {
					return value.slice(0, 4) + '...'
				}
				return value
			},
			bankName_val(value) {
				if (!value) return ''
				if (value.length > 16) {
					return value.slice(0, 16) + '...'
				}
				return value
			},
		},
		components:{mpvuePicker,mpvueCityPicker},
		data(){
			return {
				imglink: this.$store.state.imgLink,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				steps:[
					{name:'机构信息',value:0},
					{name:'银行卡信息',value:1},
					{name:'确认完成',value:2},
				],
				items:[
					{name:'打款到“个人账号”',value:'0'},
					{name:'打款“公司公帐”',value:'1'}
				],
				showSelectAreaBlock:false,//显示选择省市区弹窗
				areaIndex:[0,0,0],
				saveState:false,
				store_id:0,
				token:"",
				stepIndex:0,
				remaining_time:0,
				/*************机构信息************/
				type:0,
				organization_name:'',
				company_name:'',
				business_licences:'',
				unified_social_credit_code:'',
				business_licences_start_date:'',
				business_licences_end_date:'',
				business_licences_is_long_term:0,
				province_id:0,
				city_id:0,
				country_id:0,
				address:'',
				area:'',//省市县/区
				email:'',
				door_photo:'',
				in_store_photo:'',
				in_store_photo2:'',
				/*************法人信息*************/
				name_of_cardholder:'',
				id_of_cardholder:'',
				account_id_start_date:'',
				account_id_end_date:'',
				is_long_term:0,
				front_of_account_image:'',
				back_of_account_image:'',
				pay_to:0,
				/************银行卡信息*************/
				account_name:'',
				account_number:'',
				bank_id:'',
				branch_bank_id:'',
				branch_bank_name:'',
				/**************省市区******************/
				provinceList:[],
				cityList:[],
				cityListDetails:[],
				prefectureDetailList:[]
			}
		},
		onLoad(option) {
			
			// console.log(option)
			let store_id = parseInt(option.store_id,10);
			// console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			
			let step_index = parseInt(option.step_index,10)
			if(!isNaN(step_index) && step_index>0){
				this.stepIndex = step_index
			}
			
		},
		onShow() {
			
			let type = uni.getStorageSync('type')
			if(!isNaN(type)){
				this.type = type
			}
			
			console.log(this.type,'进来获取到的url上的type参数 onLoad data type')
			console.log(this.type,' onShow this.type')
			let time = new Date()
			this.y = time.getFullYear()
			this.m = time.getMonth()+1
			this.d = time.getDate()
			if(this.m < 10){
				this.m = '0'+ this.m
			}
			if(this.d < 10){
				this.d = '0'+ this.d
			}
			let end = this.d = time.getDate() + 1
			if(end < 10){
				end = '0' + end
			}
			
			this.business_licences_start_date = `${this.y}-${this.m}-${this.d}`
			this.business_licences_end_date = `${this.y}-${this.m}-${end}`
			
			this.account_id_start_date = `${this.y}-${this.m}-${this.d}`
			this.account_id_end_date = `${this.y}-${this.m}-${end}`
			console.log('current',time.getHours()+':'+time.getMinutes()+':'+time.getMilliseconds())
			
			this.getCity()
			this.get_snapshot_indentification()
		},
		onHide(){
			this.set_snapshot_indentification()
		},
		methods:{
			changeStepIndex(value){
				this.stepIndex = value
			},
			//获取城市
			getCity(){
				this.$api.gain_all_city({token:this.$store.getters.getToken}).then(res => {
					console.log(res,'gain_all_city')
					if(res.status){
						this.provinceList = res.list
						this.provinceList.forEach(item => {
							this.cityList.push(item.children)
						})
						this.cityListDetails = this.cityList[0]
						// console.log(this.cityListDetails)
						this.prefectureDetailList = this.cityListDetails[0].children
						
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//获取绑卡信息
			getStoreIndentification(){
				
				const that = this
				if(!that.$store.getters.getToken){
					location.href = this.$store.state.URL + '/customer/user/wx_login?page=/pages/memberCenter/shop/BankCardBinding/sureBindingFirm?store_id'+that.store_id
					return false;
				}
				
				let data = {
					token:that.$store.getters.getToken,
					store_id:that.store_id,
				}
				
				that.$api.get_store_identification(data).then(res => {
					
					console.log(res,'get_store_identification')
					if(res.status){
						
						const identification = res.data
						that.organization_name =identification.organization_name
						that.company_name = identification.company_name
						that.business_licences = identification.business_licences
						that.unified_social_credit_code = identification.unified_social_credit_code
						that.province_id = identification.province_id
						that.city_id = identification.city_id
						that.country_id = identification.country_id
						that.province = identification.province
						that.city = identification.city
						that.country = identification.country
						that.address = identification.address
						that.area = identification.province + identification.city + identification.country
						that.email = identification.email
						that.door_photo = identification.door_photo
						that.in_store_photo = identification.in_store_photo
						that.in_store_photo2 = identification.in_store_photo2
						/*************法人信息*************/
						that.name_of_cardholder = identification.name_of_cardholder
						that.id_of_cardholder = identification.id_of_cardholder
						that.account_id_start_date = identification.account_id_start_date
						that.account_id_end_date = identification.account_id_end_date
						that.is_long_term  = identification.is_long_term
						that.front_of_account_image  = identification.front_of_account_image
						that.back_of_account_image  = identification.back_of_account_image
						that.pay_to  = identification.pay_to
						/************银行卡信息*************/
						that.account_name = identification.account_name
						that.account_number = identification.account_number
						that.bank_id  = identification.bank_id
						that.bank_name  = identification.bank_name
						that.branch_bank_id = identification.branch_bank_id
						that.branch_bank_name = identification.branch_bank_name
						
						that.set_snapshot_indentification();
					}
				});
			},
			handleInputOrganizationName(){
				this.set_snapshot_indentification();
			},
			handleInputCompanyName(){
				this.set_snapshot_indentification();
			},
			handleInputUnifiedSocialCreditCode(){
				this.set_snapshot_indentification();
			},
			handleInputAddress(){
				this.set_snapshot_indentification();
			},
			//显示选择省市区/县弹窗
			handleShowArea(e){
				console.log(e,'handleShowArea')
				console.log(this.areaIndex,'当前所选省市区')//当前所选省市区\
				console.log(this.provinceList,'this.provinceList')
				console.log(this.cityListDetails,'this.cityListDetails')
				console.log(this.prefectureDetailList,'this.prefectureDetailList')
				// this.province = this.provinceList
				this.showSelectAreaBlock = true
			},
			//选择地区
			handleSeleteArea: function (e){
				console.log(e,'handleSelectArea')
				this.areaIndex  =e.detail.value
				this.cityListDetails = this.cityList[e.detail.value[0]]
				this.prefectureDetailList = this.cityListDetails[e.detail.value[1]].children
				this.set_snapshot_indentification();
			},
			////点遮罩层取消选择
			cancleSelected(){
				this.showSelectAreaBlock = false
			},
			//确认选择省市区
			confirmSelected(e){//确认选择
				// console.log(e,'confirmSelected')
				this.showSelectAreaBlock = false
				
				this.province = this.provinceList[this.areaIndex[0]].province
				this.city = this.cityListDetails[this.areaIndex[1]].city
				this.country = this.prefectureDetailList[this.areaIndex[2]].country
				
				this.province_id= this.provinceList[this.areaIndex[0]].province_id
				this.city_id = this.cityListDetails[this.areaIndex[1]].city_id
				this.country_id = this.prefectureDetailList[this.areaIndex[2]].country_id
				
				console.log(this.province,this.city,this.country)
				
				console.log(this.province_id,this.city_id,this.country_id)
				this.area = `${this.province}-${this.city}-${this.country}`
				
				this.set_snapshot_indentification();
			},
			//下一步
			handleNextStep(index){
				
				if(this.stepIndex<3){
					
					this.stepIndex ++ 
				}
			},
			//上一步
			handlePreStep(){
				if(this.stepIndex>0){
					this.stepIndex--
				}
			},
			handleInputNameOfCardholder(){
				this.set_snapshot_indentification();
			},
			handleInputIdOfCardholder(){
				this.set_snapshot_indentification();
			},
			handleInputEmail(){
				this.set_snapshot_indentification();
			},
			changeBusinessLicencesStartDate(e){
				this.business_licences_start_date = e.detail.value
				this.set_snapshot_indentification();
				console.log('changeBusinessLicencesStartDate',e)
			},
			changeBusinessLicencesEndDate(e){
				this.business_licences_end_date = e.detail.value
				this.set_snapshot_indentification();
				console.log('changeBusinessLicencesEndDate',e)
			},//勾选长期有效
			businessLicencesRadioChange: function(e) {
				console.log('businessLicencesRadioChange',e)
				this.business_licences_is_long_term = !this.business_licences_is_long_term
				this.set_snapshot_indentification();
			},
			
			changeStartDate(e){
				this.account_id_start_date = e.detail.value
				this.set_snapshot_indentification();
				// console.log('changeStartDate',e)
			},
			changeEndDate(e){
				
				this.account_id_end_date = e.detail.value
				this.set_snapshot_indentification();
				// console.log('changeEndDate',e)
			},
			//勾选长期有效
			radioChange: function(e) {
				console.log('radioChange',e)
				this.is_long_term = !this.is_long_term
				this.set_snapshot_indentification();
			},
			//打款方式
			handleChangePayTo: function(e) {
				// console.log(e,'handleChangePayTo')
				this.pay_to = e.detail.value
				this.set_snapshot_indentification();
			},
			uploadPhoto(photo_type){
				
				const that = this;
				that.set_snapshot_indentification();
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
				    success: (chooseImageRes) => {
						// if (!/\.(jpg|png|bmp)$/i.test(chooseImageRes.tempFiles[0].name)) {
						// 	uni.showToast({
						// 		title:'图片类型必须为jpg/png/bmp',
						// 		icon:'none',
						// 		duration:2000
						// 	})
						// 	return false;
						// }
						console.log(chooseImageRes)
						uni.getImageInfo({
							src: chooseImageRes.tempFilePaths[0],
							success: (img) => {
								uni.showLoading({
									title: '图片上传中'
								})
								uploadFile(chooseImageRes.tempFilePaths[0]).then(res => {
									console.log(res,'uploadFile')
									if(res.status){
										console.log(photo_type,'uploadPhoto photo_type');
										switch(photo_type){
											case 'business_licences':
												that.business_licences = res.data.url
											break;
											case 'door_photo':
												that.door_photo = res.data.url
												break;
											case 'in_store_photo':
												that.in_store_photo = res.data.url
												break;
											case 'in_store_photo2':
												that.in_store_photo2 = res.data.url
												break;
											case 'front_of_account_image':
												that.front_of_account_image = res.data.url
												break;
											case 'back_of_account_image':
												that.back_of_account_image = res.data.url
												break;
											default:
												uni.showToast({
													title:'参数错误！',
													icon:'none',
													duration:2000
												})
										}
										that.set_snapshot_indentification();
										uni.hideLoading()
									}
								}).catch(err => {
									console.log(err)
								})
							}
						})
				    }
				});
				
			},
			handleInputAccountName(){
				this.set_snapshot_indentification();
			},
			handleInputAccountNumber(){
				this.set_snapshot_indentification();
			},
			selectBank(bank_type){
				//现保存当前数据快照
				this.set_snapshot_indentification();
				
				console.log('selectBank',bank_type,this.bank_id)
				if(bank_type === 'bank'){
					
					uni.navigateTo({
						url:'/pages/memberCenter/shop/BankCardBinding/searchBank?store_id='+this.store_id + '&bank_type=' + bank_type
					})
					
				}else{
					
					if(this.bank_id>0){
						
						uni.navigateTo({
							url:'/pages/memberCenter/shop/BankCardBinding/searchBank?store_id='+this.store_id + '&bank_type=' + bank_type + '&bank_id='+this.bank_id
						})
					}else{
						uni.showToast({
							title:'请先选择银行',
							icon:'none',
							duration:2000
						})
					}
					
					
				}
				
			},
			// 身份证号验证
			checkIDCard(idcode){
			    // 加权因子
			    var weight_factor = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
			    // 校验码
			    var check_code = ['1', '0', 'X' , '9', '8', '7', '6', '5', '4', '3', '2'];
			
			    var code = idcode + "";
			    var last = idcode[17];//最后一位
			
			    var seventeen = code.substring(0,17);
			
			    // ISO 7064:1983.MOD 11-2
			    // 判断最后一位校验码是否正确
			    var arr = seventeen.split("");
			    var len = arr.length;
			    var num = 0;
			    for(var i = 0; i < len; i++){
			        num = num + arr[i] * weight_factor[i];
			    }
			    
			    // 获取余数
			    var resisue = num%11;
			    var last_no = check_code[resisue];
			
			    // 格式的正则
			    // 正则思路
			    /*
			    第一位不可能是0
			    第二位到第六位可以是0-9
			    第七位到第十位是年份，所以七八位为19或者20
			    十一位和十二位是月份，这两位是01-12之间的数值
			    十三位和十四位是日期，是从01-31之间的数值
			    十五，十六，十七都是数字0-9
			    十八位可能是数字0-9，也可能是X
			    */
			    var idcard_patter = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
			
			    // 判断格式是否正确
			    var format = idcard_patter.test(idcode);
			
			    // 返回验证结果，校验码和格式同时正确才算是合法的身份证号码
			    return last === last_no && format ? true : false;
			},
			// 验证信息
			verification(){
				let flag = true
				let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
					regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im,
					regCode = /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}/g,
					regExp = /^([1-9]{1})(\d{15}|\d{18})$/,
					t  = /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
					if(this.organization_name == ''){
						uni.showToast({
							title:'机构名称不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.email == ''){
						uni.showToast({
							title:'填写完整的邮箱地址',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					let regEmail = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
					if(!regEmail.test(this.email)){
						uni.showToast({
							title:'填写正确的邮箱地址',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.company_name == '' && this.type == 1){
						uni.showToast({
							title:'公司名称不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.business_licences == '' && this.type == 1){
						uni.showToast({
							title:'营业执照不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.unified_social_credit_code == '' && this.type == 1){
						uni.showToast({
							title:'统一社会信用代码不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(!regCode.test(this.unified_social_credit_code) && this.type == 1){
						uni.showToast({
							title:'请输入正确的统一社会信用代码',
							icon:'none',
							duration:2000	
						})
						return flag = false
					}
					if(this.area == ''){
						uni.showToast({
							title:'请选择地址',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.address == ''){
						uni.showToast({
							title:'详细地址不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.type == 1 && (this.business_licences_start_date == '' || (this.business_licences_end_date == '' && this.business_licences_is_long_term == 0 ))){
						uni.showToast({
							title:'请选择营业执照有效期',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.door_photo == '' && this.type == 1){
						uni.showToast({
							title:'公司前台照片不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.in_store_photo == '' && this.type == 1){
						uni.showToast({
							title:'公司环境照1不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.in_store_photo2 == '' && this.type == 1){
						uni.showToast({
							title:'公司环境照2不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.door_photo == '' && this.type == 0){
						uni.showToast({
							title:'店铺门头照不能为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.in_store_photo == '' && this.type == 0){
						uni.showToast({
							title:'店内环境照不能为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.name_of_cardholder == ''){
						uni.showToast({
							title:'法人姓名不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if (regEn.test(this.name_of_cardholder) || regCn.test(this.name_of_cardholder)) {
						uni.showToast({
							title: "法人姓名不能包含特殊字符",
							duration: 2000,
							mask: true,
							icon: "none"
						})
						return flag = false
					}
					if(this.id_of_cardholder == ''){
						uni.showToast({
							title:'法人身份证号不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(!this.checkIDCard(this.id_of_cardholder)){
						uni.showToast({
							title:'请输入正确的身份证号',
							icon:'none',
							duration:2000
						})
						return flag = false
					}
					if(this.account_id_start_date == '' || (this.account_id_end_date == '' && this.is_long_term == 0 )){
						uni.showToast({
							title:'请选择身份证有效期',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.front_of_account_image == '' || this.back_of_account_image == ''){
						uni.showToast({
							title:'请上传身份照正反面',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.account_name == ''){
						uni.showToast({
							title:'开户名称不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					if(this.account_number == ''){
						uni.showToast({
							title:'银行卡卡号不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					// if(!regExp.test(this.account_number)){
					// 	uni.showToast({
					// 		title:'请输入正确的银行卡卡号！',
					// 		icon:'none',
					// 		duration:2000
					// 	})
					// 	return flag=false
					// }
					if(this.bank_id <=0 || this.branch_bank_id <=0){
						uni.showToast({
							title:'开户行与开户支行不得为空',
							icon:'none',
							duration:2000
						})
						return flag=false
					}
					return flag
			},
			// 提交绑卡信息
			submitBtn(){
				console.log('11111');
				if(this.verification()){
					console.log('22222');
					if(true || this.sureTime == 0){
						console.log('33333',this.type);
						const data  = {
							store_id: this.store_id,
							type:this.type,
							organization_name:this.organization_name,
							company_name:this.company_name?this.company_name:'',
							business_licences:this.business_licences?this.business_licences:'',
							business_licences_start_date:this.business_licences_start_date,
							business_licences_end_date:this.business_licences_end_date,
							business_licences_is_long_term:this.business_licences_is_long_term,
							unified_social_credit_code:this.unified_social_credit_code?this.unified_social_credit_code:'',
							province_id:this.province_id,
							city_id:this.city_id,
							country_id:this.country_id,
							address:this.address,
							email:this.email,
							door_photo:this.door_photo,
							in_store_photo:this.in_store_photo,
							in_store_photo2:this.in_store_photo2?this.in_store_photo2:'',
							/*************法人信息*************/
							name_of_cardholder:this.name_of_cardholder,
							id_of_cardholder:this.id_of_cardholder,
							account_id_start_date:this.account_id_start_date,
							account_id_end_date:this.account_id_end_date,
							is_long_term:this.is_long_term,
							front_of_account_image:this.front_of_account_image,
							back_of_account_image:this.back_of_account_image,
							pay_to:this.type == 0?(this.pay_to?this.pay_to:0):0,
							/************银行卡信息*************/
							account_name:this.account_name,
							account_number:this.account_number,
							bank_id:this.bank_id,
							bank_name:this.bank_name,
							branch_bank_id:this.branch_bank_id,
							branch_bank_name:this.branch_bank_name,
						}
						
						this.$api.bingind_bank_card(data).then(res => {
							console.log(res,'bingind_bank_card')
							if(res.status){
								this.remove_snapshot_indentification()
								this.saveState = true
								setTimeout(() => {
									this.saveState = false
									uni.redirectTo({
										url:'/pages/memberCenter/memberCenter?store_id='+this.store_id
									})
								},2000)
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none',
									duration:2000
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
				}
			},
			set_snapshot_indentification(){
				
				console.log('set_snapshot_indentification this.type',this.type)
				
				let area = ''
				if(this.province_id>0 && this.city_id>0 && this.country_id>0){
					 area = this.province+'-'+this.city+'-'+this.country
				}
				uni.setStorageSync('identification',{
					// type:this.type,
					organization_name:this.organization_name,
					company_name:this.company_name,
					business_licences:this.business_licences,
					business_licences_start_date:this.business_licences_start_date,
					business_licences_end_date:this.business_licences_end_date,
					business_licences_is_long_term:this.business_licences_is_long_term,
					unified_social_credit_code:this.unified_social_credit_code,
					province_id:this.province_id,
					city_id:this.city_id,
					country_id:this.country_id,
					province:this.province,
					city:this.city,
					country:this.country,
					area,
					address:this.address,
					email:this.email,
					door_photo:this.door_photo,
					in_store_photo:this.in_store_photo,
					in_store_photo2:this.in_store_photo2,
					/*************法人信息*************/
					name_of_cardholder:this.name_of_cardholder,
					id_of_cardholder:this.id_of_cardholder,
					account_id_start_date:this.account_id_start_date,
					account_id_end_date:this.account_id_end_date,
					is_long_term:this.is_long_term,
					front_of_account_image:this.front_of_account_image,
					back_of_account_image:this.back_of_account_image,
					pay_to:this.pay_to,
					/************银行卡信息*************/
					account_name:this.account_name,
					account_number:this.account_number,
					bank_id:this.bank_id,
					bank_name:this.bank_name,
					branch_bank_id:this.branch_bank_id,
					branch_bank_name:this.branch_bank_name,
				});
				
			},
			remove_snapshot_indentification(){
				try{
					uni.removeStorageSync('identification')
				}catch(e){
					uni.showToast({
						title:e,
						icon:'none',
						duration:2000
					})
				}
			},
			get_snapshot_indentification(){
				
				const that = this;
				
				try{
					
					const identification = uni.getStorageSync('identification')
					if(!identification){
						console.log('get_snapshot_indentification identification没值')
						this.getStoreIndentification()
					}else{
						
						console.log(identification,'get_snapshot_indentification from localstorage')
						that.organization_name =identification.organization_name
						that.company_name = identification.company_name
						that.business_licences = identification.business_licences
						that.unified_social_credit_code = identification.unified_social_credit_code
						that.province_id = identification.province_id
						that.city_id = identification.city_id
						that.country_id = identification.country_id
						that.province = identification.province
						that.city = identification.city
						that.country = identification.country
						if(that.province_id>0 && that.city_id>0 && that.country_id>0){
							that.area = that.province +'-'+ that.city +'-'+ that.country
						}else{
							that.area = ''
						}
						
						that.address = identification.address
						that.email = identification.email
						that.door_photo = identification.door_photo
						that.in_store_photo = identification.in_store_photo
						that.in_store_photo2 = identification.in_store_photo2
						/*************法人信息*************/
						that.name_of_cardholder = identification.name_of_cardholder
						that.id_of_cardholder = identification.id_of_cardholder
						that.account_id_start_date = identification.account_id_start_date
						that.account_id_end_date = identification.account_id_end_date
						that.is_long_term  = identification.is_long_term
						that.front_of_account_image  = identification.front_of_account_image
						that.back_of_account_image  = identification.back_of_account_image
						that.pay_to  = identification.pay_to
						/************银行卡信息*************/
						that.account_name = identification.account_name
						that.account_number = identification.account_number
						that.bank_id  = identification.bank_id
						that.bank_name  = identification.bank_name
						that.branch_bank_id = identification.branch_bank_id
						that.branch_bank_name = identification.branch_bank_name
						
					}
					
					
					
				}catch(e){
					uni.showToast({
						title:e,
						icon:'none',
						duration:2000
					})
					return false;
				}
				
				console.log('get_snapshot_indentification this.type',that.type)
				
			}
		}
	}
</script>

<style>

	.birthday{
		position: fixed;
		left: 40upx;
		right: 40upx;
		margin: 0;
		transform: translate(0,-50%);
		top: 50%;
		bottom: 0;
		z-index: 888;
		height: 400upx;
		background: #fff;
		text-align: center;
	}
	.determine{
		position: fixed;
		top: 37%;right: 40upx;
		transform: translate(0,-50%);
		font-size: 35upx;
		color: #FFFFFF;
		padding: 20upx;
		z-index: 999;
		background: #FF8B46;
	}
	.birthday-tkang{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 700;
		opacity: 0.5;
		background: #000000;
	}
	/* 信息确定无误之后提交CSS */
	.save-popup{
		width: 240upx;
		height: 240upx;
		border-radius: 12upx;
		background: rgba(58,58,58,0.9);
		position: fixed;
		top: 50%;left: 50%;
		transform: translate(-50%,-50%);
	}
	.save-popup-img{
		width: 72upx;
		height: 72upx;
		margin: 0 auto;
		margin-top: 58upx;
	}
	.save-popup-img>image{
		width: 100%;
		height: 100%;
	}
	.save-popup-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin-top: 16upx;
	}
	page{
		background: #F3F3F4;
	}
	.sure-binding-page{
		width: 100%;
	}
	.sure-binding-step{
		width: 100%;
		padding-left: 30upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.sure-binding-step-content{
		width: 100%;
		position: relative;
		background: #FFFFFF;
		height: 200upx;
		box-sizing: border-box;
	}
	.common-step{
		height: 92upx;
		position: absolute;
		top: 40upx;
		z-index: 555;
	}
	.common-step:nth-child(1){
		left: 46upx;
	}
	.common-step:nth-child(2){
		left: 50%;
		transform: translate(-50%,0);
	}
	.common-step:nth-child(3){
		right:46upx;
	}
	.common-step>view:first-child{
		width: 48upx;
		height: 48upx;
		border-radius: 50%;
		text-align: center;
		line-height: 48upx;
		background: #F3F3F4;
		color: #999999;
		font-size: 28upx;
		margin-left: 24upx;
	}
	.common-step:nth-child(2)>view:first-child{
		margin-left: 36upx;
	}
	.common-step>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 10upx;
	}
	.line-long{
		width: 494upx;
		height: 4upx;
		background: #F3F3F4;
		border-radius: 4upx;
		position: absolute;
		top: 60upx;left: 50%;
		transform: translate(-50%,0);
	}
	.common-step-active>view:first-child{
		color: #FFFFFF;
		background: #FF8B46;
	}
	.sure-binding-organ{
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		padding: 32upx 0 28upx 0;
		box-sizing: border-box;
		display: flex;
	}
	.sure-binding-organ>view{
		color: #666666;
		font-size: 28upx;
	}
	.sure-binding-organ>input{
		font-size: 28upx;
		color: #333333;
		flex-grow: 1;
		margin-left: 40upx;
	}
	.uplode-img{
		width: 100%;
		padding-top: 32upx;
		padding-right: 30upx;
		box-sizing: border-box;
	}
	.uplode-img-title{
		color: #666666;
		font-size: 28upx;
	}
	.uplode-img-title>text{
		color: #999999;
		font-size: 24upx;
		display: inline-block;
		margin-left: 10upx;
	}
	.uplode-img-detail{
		width: 100%;
		height: 388upx;
		background: #F4F5F9;
		margin-top: 28upx;
	}
	.uplode-img-detail>image{
		width: 100%;
		height: 100%;
	}
	.uplode-img-detail>view>image{
		width: 140upx;
		height: 110upx;
		padding-left: 276upx;
		margin-top: 114upx;
	}
	.uplode-img-detail>view>view{
		color: #999999;
		font-size: 22upx;
		margin-top: 20upx;
		text-align: center;
	}
	.firm-msg{
		width: 100%;
		padding-left: 30upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.firm-name{
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
		display: flex;
	}
	.firm-name>view,.firm-addre>view:first-child{
		color: #666666;
		font-size: 28upx;
	}
	.firm-name>input{
		margin-left: 40upx;
		color: #333333;
		font-size: 28upx;
		flex-grow: 1;
	}
	.society-code{
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		padding: 12upx 30upx 8upx 0;
		box-sizing: border-box;
		display: flex;
	}
	.society-code>view{
		width: 112upx;
		font-size: 28upx;
		color: #666666;
	}
	.society-code>input{
		flex-grow: 1;
		color: #333333;
		font-size: 28upx;
		margin-left: 40upx;
		margin-top: 18upx;
	}
	.firm-addre{
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
	}
	.firm-addre>view>image{
		width: 20upx;
		height: 24upx;
		margin-top: 6upx;
	}
	.firm-addre>view>input{
		color: #333333;
		font-size: 28upx;
		flex-grow: 1;
	}
	.firm-addre-details{
		width: 100%;
		padding: 30upx 30upx 20upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-bottom: 1upx solid #DEDEDE;
	}
	.firm-addre-details>view{
		color: #666666;
		font-size: 28upx;
	}
	.firm-addre-details>textarea{
		flex-grow: 1;
		color: #333333;
		font-size: 28upx;
		margin-left: 40upx;
		height: 80upx;
	}
	.next-step{
		width: 300upx;
		height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		text-align: center;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		margin: 0 auto;
		margin-top: 36upx;
		font-size: 32upx;
		margin-bottom: 30upx;
	}
	.bank-card-msg{
		width: 100%;
	}
	.bank-card-content-msg{
		width: 100%;
		padding-left: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.legal-person-name{
		width: 100%;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
		border-top: 1upx solid #DEDEDE;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
	}
	.legal-person-name>view{
		color: #666666;
		font-size: 28upx;
	}
	.legal-person-name>input{
		color: #333333;
		font-size: 28upx;
		flex-grow: 1;
		margin-left: 40upx;
	}
	.valid-time{
		width: 100%;
		padding: 32upx 30upx 36upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.valid-time-title{
		color: #666666;
		font-size: 28upx;
	}
	.valid-time-detail{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 28upx;
	}
	.long-term-ffective{
		color: #999999;
		font-size: 22upx !important;
	}
	.valid-time-detail>view:first-child{
		display: flex;
		color: #666666;
		font-size: 28upx;
		line-height: 80upx;
	}
	.start-data{
		width: 260upx;
		height: 80upx;
		text-align: center;
		background: #F5F5F5;
		border-radius: 4upx;
		color: #333333;
		font-size: 26upx;
	}
	.identity-card-img{
		width: 100%;
		padding: 28upx 30upx 30upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.identity-card-img-title{
		color: #666666;
		font-size: 28upx;
	}
	.identity-card-img-content{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.identity-card-img-detail{
		background: #F4F5F9;
		width: 330upx;
		height: 212upx;
	}
	.identity-card-img-detail>image{
		width: 100%;
		height: 100%;
	}
	.identity-card-img-detail>view>image{
		width: 48upx;
		height: 48upx;
		border-radius: 50%;
		margin-top: 60upx;
		margin-left: 140upx;
	}
	.identity-card-img-detail>view>view{
		text-align: center;
		color: #666666;
		font-size: 24upx;
		margin-top: 10upx;
	}
	.give-remit{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.give-remit-title{
		color: #666666;
		font-size: 28upx;
		margin-top: 10upx;
	}
	.give-remit-content{
		flex-grow: 1;
		/* margin-left: 18upx; */
		display: flex;
		justify-content: space-between;
	}
	radio-group{
		padding-top:6upx;
		box-sizing: border-box;
	}
	.uni-list-cell>view{
		color: #333333;
		font-size: 28upx;
	}
	.bank-card-all-msg{
		width: 100%;
		margin-top: 20upx;
		padding: 30upx 0 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.explain-title{
		display: flex;
		width: 100%;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		margin-top: 10upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 30upx;
		line-height: 48upx;
		margin-left: 10upx;
	}
	.bank-name{
		width: 100%;
		display: flex;
		margin-top: 10upx;
		border-bottom: 1upx solid #DEDEDE;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
	}
	.bank-name>view,.user-bank-name>view:first-child{
		color: #666666;
		font-size: 28upx;
	}
	.bank-name>input{
		color: #333333;
		font-size: 28upx;
		flex-grow: 1;
		margin-left: 40upx;
	}
	.user-bank-name{
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
		display: flex;
	}
	.user-bank-name>view:last-child{
		flex-grow: 1;
		margin-left: 40upx;
		display: flex;
		justify-content: space-between;
	}
	.user-bank-name>view>input{
		flex-grow: 1;
		color: #333333;
		font-size: 28upx;
	}
	.user-bank-name>view>image{
		width: 20upx;
		height: 26upx;
		margin-top: 6upx;
	}
	.next-last-step{
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin: 32upx 0;
	}
	.step-common{
		width: 340upx;
		height: 92upx;
		line-height: 92upx;
		font-size: 32upx;
		border-radius: 44upx;
		text-align: center;
	}
	.last-step{
		border: 1upx solid #999999;
		color: #666666;
	}
	.next-step-detail{
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		color: #FFFFFF;
	}
	.firm-sure-msg{
		width: 100%;
	}
	.firm-sure-msg{
		width: 100%;
		background: #FFFFFF;
		padding-left: 30upx;
		box-sizing: border-box;
	}
	.sure-organ-name{
		width: 100%;
		display: flex;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.sure-organ-name>view{
		color: #666666;
		font-size: 28upx;
	}
	.sure-organ-name>input{
		flex-grow: 1;
		margin-left: 40upx;
		font-size: 28upx;
		color: #333333;
	}
	.sure-user-msg{
		width: 100%;
		background: #FFFFFF;
		margin-top: 20upx;
		padding-left: 30upx;
		box-sizing: border-box;
	}
	.ID-number{
		width: 100%;
		padding: 32upx 30upx 30upx 0;
		box-sizing: border-box;
		display: flex;
		line-height: 80upx;
	}
	.ID-number>view:first-child{
		color: #666666;
		font-size: 28upx;
	}
	.ID-number>view:last-child{
		flex-grow: 1;
		display: flex;
		margin-left: 20upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #666666;
	}
	.ID-number>view>view{
		width: 204upx;
		height: 80upx;
		text-align: center;
		background: #F5F5F5;
		border-radius: 4upx;
		color: #333333;
	}
	.sure-bank-msg{
		width: 100%;
		background: #FFFFFF;
		padding-left: 30upx;
		padding-top: 30upx;
		box-sizing: border-box;
		margin-top: 20upx;
	}
	.sure-submit{
		width: 100%;
		margin-top: 50upx;
		margin-bottom: 80upx;
	}
	.sure-submit>view:first-child{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 44upx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		margin: 0 auto;
		font-size: 32upx;
	}
	.sure-submit>view:last-child{
		width: 600upx;
		line-height: 80upx;
		height: 80upx;
		text-align: center;
		color: #666666;
		font-size: 32upx;
		border: 1upx solid #999999;
		border-radius: 44upx;
		margin: 0 auto;
		margin-top: 40upx;
	}
</style>
